<template>
  <div>
    <!-- 表单设计编辑 -->
    <div v-if="formType === 1">
      <a-checkbox-group
        v-model:value="settingC.options.defaultValue"
        :style="{ width: settingC.options.width + '%' }"
        :disabled="settingC.options.disabled"
      >
        <a-checkbox
          :style="{
            marginLeft: settingC.options.inline ? '' : '8px',
            display: settingC.options.inline ? '' : 'block',
            height: settingC.options.inline ? '' : '30px',
            lineHeight: settingC.options.inline ? '' : '30px',
          }"
          :value="item.value"
          v-for="(item, index2) in settingC.options.options"
          :key="item.value + index2"
        >
          {{ settingC.options.showLabel ? item.label : item.value }}
        </a-checkbox>
      </a-checkbox-group>
    </div>
    <!-- 表单展示 -->
    <div v-else>
      <!-- 表单展示编辑 -->
      <div v-if="settingC.fieldState === 0">
        <a-checkbox-group
          v-model:value="dataModel"
          :style="{ width: settingC.options.width + '%' }"
          :disabled="settingC.options.disabled"
        >
          <a-checkbox
            v-for="(item, index) in settingC.options.remote
              ? settingC.options.remoteOptions
              : settingC.options.options"
            :style="{
              marginLeft: settingC.options.inline ? '' : '8px',
              display: settingC.options.inline ? '' : 'block',
              height: settingC.options.inline ? '' : '30px',
              lineHeight: settingC.options.inline ? '' : '30px',
            }"
            :value="item.value"
            :key="index"
          >
            <template v-if="settingC.options.remote">{{ item.label }}</template>
            <template v-else>
              {{ settingC.options.showLabel ? item.label : item.value }}
            </template>
          </a-checkbox>
        </a-checkbox-group>
      </div>
      <!-- 表单展示只读 -->
      <div v-else>
        <a-input v-model:value="dataModel" style="display: none"></a-input>
        {{ settingC.options.defaultValue }}
      </div>
    </div>
  </div>
</template>
<script>
  import { GetNames } from '@/api/dictionary/api'

  export default {
    data() {
      return {
        dataModel: this.models[this.setting.table + '-' + this.setting.field],
        settingC: this.setting,
        modelsC: this.models,
      }
    },

    props: {
      formType: {
        type: Number,
        default: 0,
      },
      setting: {
        type: Object,
        default: null,
      },
      models: {
        type: Object,
        default: Object,
      },
    },
    created() {
      if (this.dataModel === '') {
        this.dataModel = []
      } else {
        if (typeof this.dataModel === 'string') {
          this.dataModel = this.dataModel.toString().split(',')
        }
      }
      if (this.settingC.fieldState !== 0) {
        GetNames({
          ids: this.dataModel,
        }).then((res) => {
          if (res.isSuccess) {
            this.settingC.options.defaultValue = res.content
          }
        })
      }
    },
    watch: {
      dataModel: {
        deep: true,
        handler(val) {
          this.modelsC[
            this.settingC.table + '-' + this.settingC.field
          ] = val.join(',')
        },
      },
    },
  }
</script>
